<template>
  <div class="page">
    <div class="page-breadcrumb">
      <el-breadcrumb class="strong" separator="/">
        <el-breadcrumb-item :to="{ path: '/assessScore/list' }">评分列表</el-breadcrumb-item>
        <el-breadcrumb-item>评分详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <v-pageSearch>
      <el-form :inline="true">
        <el-row>
          <el-col :span="8">
            <el-form-item>
              <el-form-item label="考核对象：">
                <h4>{{staff}}</h4>
              </el-form-item>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="考核月度：">
              <h4>{{date}}</h4>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="级别：">
              <el-tag :type="level | statusFilterType">{{level | statusFilter}}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </v-pageSearch>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="个人月度总结" name="1">
        <div>{{content}}</div>
      </el-collapse-item>
      <el-collapse-item title="评分" name="2">
        <el-tabs type="border-card">
          <el-tab-pane label="工作量分(40%)">
            <el-form ref="form" :model="form.work" label-width="80px">
              <el-form-item label="当前分数">
                  <h4>{{form.work.now}}</h4>
              </el-form-item>
              <el-form-item label="评价内容">
                <el-input type="textarea" v-model="form.work.content"></el-input>
              </el-form-item>
              <el-form-item label="评分">
                  <el-input-number size="small" :max='100' :min='-100' v-model="form.work.score"></el-input-number>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="工作品质分(30%)">
            <el-form ref="form" :model="form.quality" label-width="80px">
              <el-form-item label="当前分数">
                  <h4>{{form.quality.now}}</h4>
              </el-form-item>
              <el-form-item label="评价内容">
                <el-input type="textarea" v-model="form.quality.content"></el-input>
              </el-form-item>
              <el-form-item label="评分">
                  <el-input-number size="small" :max='100' :min='-100' v-model="form.quality.score"></el-input-number>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="团队协作分(18%)">
            <el-form ref="form" :model="form.team" label-width="80px">
              <el-form-item label="当前分数">
                  <h4>{{form.team.now}}</h4>
              </el-form-item>
              <el-form-item label="评价内容">
                <el-input type="textarea" v-model="form.team.content"></el-input>
              </el-form-item>
              <el-form-item label="评分">
                  <el-input-number size="small" :max='100' :min='-100' v-model="form.team.score"></el-input-number>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="平时分(20%)">
            <el-form ref="form" :model="form.normal" label-width="80px">
              <el-form-item label="当前分数">
                  <h4>{{form.normal.now}}</h4>
              </el-form-item>
              <el-form-item label="评价内容">
                <el-input type="textarea" v-model="form.normal.content"></el-input>
              </el-form-item>
              <el-form-item label="评分">
                  <el-input-number size="small" :max='100' :min='-100' v-model="form.normal.score"></el-input-number>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="学习创新分(10%)">
            <el-form ref="form" :model="form.study" label-width="80px">
              <el-form-item label="当前分数">
                  <h4>{{form.study.now}}</h4>
              </el-form-item>
              <el-form-item label="评价内容">
                <el-input type="textarea" v-model="form.study.content"></el-input>
              </el-form-item>
              <el-form-item label="评分">
                  <el-input-number size="small" :max='100' :min='-100' v-model="form.study.score"></el-input-number>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="经理评分(80%)">
            <el-form ref="form" :model="form.master" label-width="80px">
              <el-form-item label="当前分数">
                  <h4>{{form.master.now}}</h4>
              </el-form-item>
              <el-form-item label="评价内容">
                <el-input type="textarea" v-model="form.master.content"></el-input>
              </el-form-item>
              <el-form-item label="评分">
                  <el-input-number size="small" :max='100' :min='-100' v-model="form.master.score"></el-input-number>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="全勤(2%)">
            <el-form ref="form" :model="form.attend" label-width="80px">
              <el-form-item label="当前分数">
                  <h4>{{form.attend.now}}</h4>
              </el-form-item>
              <el-form-item label="评价内容">
                <el-input type="textarea" v-model="form.attend.content"></el-input>
              </el-form-item>
              <el-form-item label="评分">
                  <el-input-number size="small" :max='100' :min='-100' v-model="form.attend.score"></el-input-number>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-collapse-item>
    </el-collapse>
    
    <el-row type="flex" justify="center" style="margin-top:20px;">
      <el-col :span="3">
        <el-button type="success" @click="onSubmit"><i class="fa fa-check fa-lg"></i> &nbsp;提交</el-button>
      </el-col>
      <el-col :span="3">
        <v-pageBack align='right' style="padding:0;">
        </v-pageBack>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  export default {
    data() { 
      return {
        activeNames: ['1','2'],
        date: '',
        level: 0,
        auditor: '',  
        content:'',

        form: {
          work:{
            now: 75,
            content: '',
            score: 0
          },
          quality:{
            now: 70,
            content: '',
            score: 0
          },
          team:{
            now: 55,
            content: '',
            score: 0
          },
          normal:{
            now: 65,
            content: '',
            score: 0
          },
          study:{
            now: 55,
            content: '',
            score: 0
          },
          master:{
            now: 70,
            content: '',
            score: 0
          },
          attend:{
            now: 80,
            content: '',
            score: 0
          }

        }
      };
    },
    filters: {
      statusFilter(level) {
        const statusMap = ['优','良','中','差']
        return statusMap[level]
      },
      statusFilterType(level) {
        const statusMapType = ['primary','success','danger','error']
        return statusMapType[level]
      }
    },
    methods: {
        // 接收路由参数数据
        fetchData () {
            let objArr = this.$route.query.obj.split(',');
            this.staff = objArr[1];
            this.level = parseInt(objArr[2]);
            console.log(objArr)
            this.content =  '勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？'
        },
        onSubmit(){
          console.log(this.form)
        }
    },
    created() {
        this.fetchData()
    },
    mounted() {
        
    }
  }
</script>
<style scoped>

</style>
